$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .t {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: $fontSize_54;
      font-weight: 700;
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-50%);
      z-index: 10;
      transition: all 600ms;
      img{
        width: 60/$f+vw;
      }
      &:hover {
        transform:translateX(-50%) rotate(180deg);
      }
    }
  }

  .types {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: center;

    span {
      width: 1px;
      height: 1.5vw;
      background: #E6E6E6;
    }

    a {
      width: 15vw;
      color: #666;
      font-size: $fontSize_16;
      text-align: center;
      position: relative;
      padding: 1.5vw 0;
      transition: all 600ms;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #79C536;
        transition: all 600ms;
      }

      &:hover {
        color: #79C536;
      }
    }

    .active {
      color: #79C536;

      &::after {
        width: 100%;
      }
    }
  }

  .section1 {
    width: 75vw;
    margin: 4vw   auto;
    display: flex;
    justify-content: space-between;

    .lbox {
      width: 22%;

      .t {
        color: #333;
        font-size: 20/$f+vw;
        font-weight: 600;
      }

      .search {
        position: relative;
        margin: 1vw 0;

        input {
          border: 1px solid #DBDBDB;
          outline: none;
          width: 100%;
          padding: 10px 0;
          font-size: $fontSize_16;
          text-indent: 10px;

          &::placeholder {
            color: rgba(54, 54, 54, 0.3);
          }
        }

        .btn {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;

          img {
            display: block;
          }
        }
      }

      .proTypes {
        .item {
          position: relative;
          margin-bottom: 1vw;

          .d1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(90deg, #51AE25 0%, #84CB3B 100%);
            padding: 0.6vw 1vw;
            font-size: $fontSize_14;
            color: white;

            .icon {
              cursor: pointer;

              img {
                display: block;
                transition: all 600ms;
              }
            }
          }

          .d2 {
            display: none;

            a {
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: rgba(119, 119, 119, 1);
              font-size: $fontSize_14;
              padding: 0.6vw 1vw;

              .name,
              .num {
                transition: all 600ms;
              }

              &:hover {
                background-color: #fff;

                .name {
                  color: rgba(213, 94, 47, 1);
                }

                .num {
                  color: rgba(51, 51, 51, 1);
                }
              }
            }

            .active {
              background-color: #fff;

              .name {
                color: rgba(213, 94, 47, 1);
              }

              .num {
                color: rgba(51, 51, 51, 1);
              }
            }
          }
        }

        .show {
          background: #F5F5F5;
          box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
          .d1 {
            .icon {
              img {
                transform: rotate(-180deg);
              }
            }
          }
        }
      }
    }

    .rbox {
      width: 76%;

      .pt {
        padding: 1.5vw;
        background: url('../images/pbg.png') no-repeat;
        background-size: cover;
        font-size: $fontSize_32;
        font-weight: 600;
      }

      .pros {
        display: flex;
        flex-wrap: wrap;
        width: 103.5%;
        margin-left: -1.5%;

        a {
          border-radius: 3px;
          border: 1px solid #E6E6E6;
          background: #FFF;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
          width: calc(31% - 2vw);
          margin-left: 1.6%;
          margin-top: 2vw;
          padding: 1vw;

          .pic {
            img {
              width: 100%;
              display: block;
              object-fit: cover;
              transition: all 600ms;
            }
          }

          .name {
            font-size: $fontSize_16;
            color: rgba(51, 51, 51, 1);
            font-weight: 500;
            margin: 10px 0;
          }

          .tag {
            color: #999;
            font-size: $fontSize_14;
          }

          .more {
            margin: 2vw 0 1vw 0;
            display: flex;
            align-items: center;

            p {
              color: #999;
              font-size: $fontSize_16;
              margin-right: 8px;
              transition: all 600ms;
            }

            svg {
              path {
                transition: all 600ms;
              }
            }
          }

          &:hover {
            .pic {
              img {
                transform: scale(1.05);
              }
            }

            .more {
              p {
                color: #79C536;
              }

              svg {
                path {
                  fill: #79C536;
                }
              }
            }
          }
        }
      }

      .pager {
        display: flex;
        justify-content: center;
        margin: 3vw auto;
        align-items: center;
        .nums{
          display: flex;
          margin: 0 10px;
          a {
            width: 33/$f+vw;
            height: 33/$f+vw;
            border: 1px solid #79C536;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            color: #333;
            font-size: $fontSize_14;
            margin: 0 10px;
            transition: all 600ms;
            &:hover{
              background-color: #79C536;
              color:white;
            }
          }
          .active{
            background-color: #79C536;
            color:white;
          }
        }
      }
    }
  }

  .section2 {
    width: 100%;
    background: url(../images/cbg.png) no-repeat;
    background-size: cover;
    padding: 4vw 0 3vw 0;

    .box {
      width: 70vw;
      margin: 0 auto;
      display: flex;
      align-items: center;

      .t {
        color: white;
        font-size: $fontSize_32;
        font-weight: 600;
      }

      .form {
        display: flex;
        align-items: center;

        input {
          border-radius: 4px;
          background: #FFF;
          backdrop-filter: blur(2px);
          width: 260/$f+vw;
          outline: none;
          border: none;
          margin-left: 2vw;
          padding: 1.2vw 0;
          color: #999;
          font-size: $fontSize_14;
          text-indent: 15px;
        }

        .submit {
          border-radius: 4px;
          background: #344A83;
          padding: 1vw 3vw;
          color: white;
          font-size: $fontSize_16;
          margin-left: 2vw;
          cursor: pointer;
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .t{
        font-size: 20px;
      }
      .add{
        bottom:25%;
        img{
          width:20px;
        }
      }
    }
    .types{
      a{
        width: 30%;
        font-size: 14px;
        padding: 10px 0;
        &::after{
          height: 2px;
        }
      }
      span{
        height: 10px;
      }
    }
    .section1{
      width: 90%;
      margin: 30px auto;
      flex-direction: column;
      .lbox{
        width: 100%;
        .t{
          font-size: 18px;
        }
        .search{
          margin: 10px 0;
          input{
            font-size: 16px;
          }
        }
        .proTypes{
          .item{
            margin-bottom: 10px;
            .d1{
              font-size: 14px;
              padding: 8px 15px;
            }
            .d2{
              a{
                padding: 8px 15px;
                font-size: 14px;
              }
            }
          }
        }
      }
      .rbox{
        width: 100%;
        margin-top: 30px;
        .pt{
          font-size: 20px;
          padding: 15px;
        }
        .pros{
          width: 100%;
          margin-left: 0;
          justify-content: space-between;
          a{
            width: calc(48% - 32px);
            margin-left: 0;
            margin-top: 15px;
            padding: 15px;
            .name{
              font-size: 16px;
            }
            .tag{
              font-size: 14px;
            }
            .more{
              p{
                font-size: 14px;
                margin-right: 10px;
              }
            }
          }
        }
        .pager{
          margin-bottom: 40px;
          .nums{
            a{
              font-size: 14px;
              width:30px;
              margin: 0 5px;
              height: 30px;
            }
          }
        }
      }
    }
    .section2{
      .box{
        width: 90%;
        flex-direction: column;
        .t{
          font-size: 18px;
        }
        .form{
          width: 100%;
          flex-direction: column;
          input{
            font-size: 14px;
            width: 100%;
            padding: 10px 0;
            margin-top: 10px;
          }
          .submit{
            margin-top: 10px;
            font-size: 14px;
            padding: 5px 15px;
          }
        }
      }
    }
  }
}